<template>
  <div :class="$style.goodsFlow">
    <div v-for="info in goodsInfos" :class="$style.goods">
      <div :class="$style.cover">
        <img
          v-lazy="info.g_pic_url"
          @click="goToGoodsDetail(info.g_id)"
          v-analytics.click="{
            action: 'Goods Click',
            category: category,
            label: info.g_id,
          }"
        >
      </div>
      <div :class="$style.desc">
        <p :class="$style.discountPrice">
          <span>{{info.currency + info.discountPrice}}</span>
          <s><span :class="$style.currency">{{info.currency}}</span> {{info.originalPrice}}</s>
        </p>
        <p :class="$style.original">
          <span>{{info.currency + info.couponPrice}}</span>
          <span>First Order Price</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'GoodsFlow',
  props: {
    goodsInfos: Array,
    category: String,
  },
  methods: {
    goToGoodsDetail(goodsId) {
      this.$router.push({
        path: '/goodsInfo',
        query: { goodsId },
      })
      // ga('send', 'event', 'Special Subject', 'Goods Click', args.goodsId, {
      //   hitCallback: () => {
      //     clientApis.goToGoodsDetail(args.goodsId)
      //   },
      // })
    },
  },
}
</script>

<style lang="scss" module>
  .goodsFlow {
    display: inline-block;
    margin-bottom: 4px;
    margin-bottom: 2px;
  }

  .goods {
    display: inline-block;
    width: 179px;
    margin-bottom: 2px;
    &:nth-of-type(even) {
      margin-left: 2px;
    }
  }

  .cover {
    position: relative;
    width: 179px;
    height: 179px;
    border: none !important;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }

  .desc {
    background-color: #fff;
    height: 52px;
  }

  .discountPrice {
    font-size: 16px;
    text-align: left;
    line-height: 18px;
    padding-left: 12px;
    padding-top: 9px;
    & > s {
      font-size: 10px;
      color: #9B9B9B;
      vertical-align: middle;
    }
  }

  .original {
    font-size: 10px;
    text-align: left;
    padding-left: 12px;
    line-height: 18px;
    & > span {
      color: #FF464E;
      &:first-child {
        font-size: 16px;
      }
    }
  }

  .off {
    padding-left: 2px;
  }
</style>
